import echarts from 'echarts'


// 定义HEX颜色
const COLOR_BLUE = '#3D85FE'
const COLOR_PURPLE = '#9E6AF5'
const COLOR_GREEN = '#2EECC1'
const COLOR_WHITE = '#FFFFFF'
// 定义rgba颜色
const COLOR_BLUE_RGB_PRE = 'rgba(61, 133, 254,'
const COLOR_PURPLE_RGB_PRE = 'rgba(158, 106, 245,'
const COLOR_GREEN_RGB_PRE = 'rgba(46, 236, 193,'

export const  echart1js = function (){
   let option = {
        backgroundColor: COLOR_WHITE,
        title: {
            text: '一周业务数',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 20,
                color: '#919398',
                fontFamily: 'Source Han Sans SC'
            },
            left: '5%',
            top:5
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            icon: 'rect',
            itemWidth: 20,
            itemHeight: 10,
            orient: 'vertical',
            itemGap: 13,
            data: ['出库', '入库', '物权'],
            top:'5%',
            right: 20,
            // backgroundColor: '',
            textStyle: {
                fontSize: 14,
                color: '#919398'
            }
        },
        grid: {
            show:false,
            left: '8%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            // show:false,
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show:false,
                lineStyle: {
                    color: '#57617B'
                }
            },
            // 坐标轴刻度相关设置
            axisTick:{
                show:false,
            },
            axisLabel:{
                color:'#919398',
                fontSize:14,
                fontFamily: 'Source Han Sans SC'
            },
            data: ['04-30', '05-01', '05-02', '05-03', '05-04', '05-05', '05-06', '05-07']
        }],
        yAxis: [{
            // show:false,
            type: 'value',
            // name: '一周业务数',
            offset: 30,
            axisTick: {
                show: false
            },
            axisLine: {
                show:false,
            },
            axisLabel: {
                // margin: 10,
                color:'#919398',
                fontSize:14,
                fontFamily: 'Source Han Sans SC'
            },
            // minorTick:{
            //     show:false
            // },

            splitLine: {
                show:false
                // lineStyle: {
                //     color: '#57617B'
                // }
            }
        }],
        series: [{
            name: '出库',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            showSymbol: false,
            
            lineStyle: {
                color:COLOR_BLUE_RGB_PRE + '0.8)',
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: COLOR_BLUE_RGB_PRE + ' 0.3)' // 0% 处的颜色
                    }, {
                        offset: 1, color: COLOR_BLUE_RGB_PRE + ' 0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            },
           itemStyle: {
                    color: COLOR_BLUE_RGB_PRE + ' 0.9)'
                },
            data: [220, 182, 191, 134, 150, 120, 110, 125 ]
        },{
            name: '入库',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            showSymbol: false,
            
            lineStyle: {
                color:COLOR_PURPLE_RGB_PRE + ' 0.8)',
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: COLOR_PURPLE_RGB_PRE + ' 0.3)' // 0% 处的颜色
                    }, {
                        offset: 1, color: COLOR_PURPLE_RGB_PRE + ' 0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            },
           itemStyle: {
                    color: COLOR_PURPLE_RGB_PRE + ' 1)'
                },
            data: [420, 152, 125, 194, 153, 140, 365, 130 ]
        },{
            name: '物权',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            showSymbol: false,
            
            lineStyle: {
                color:COLOR_GREEN_RGB_PRE + ' 0.8)',
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: COLOR_GREEN_RGB_PRE + ' 0.3)' // 0% 处的颜色
                    }, {
                        offset: 1, color: COLOR_GREEN_RGB_PRE + ' 0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            },
           itemStyle: {
                    color: COLOR_GREEN_RGB_PRE + ' 1)'
                },
            data: [141, 102, 105, 134, 183, 120, 465, 230 ]
        } ]
    };
    return option;
}
export const  echart2js = function (){
   let option = {
        backgroundColor: COLOR_WHITE,
        title: {
            text: '一周应收款统计',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 20,
                color: '#919398',
                fontFamily: 'Source Han Sans SC'
            },
            left: '5%',
            top:5
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
            // formatter: '{b0}: {c0}<br />{b1}: {c1}'
        },
        legend: {
            icon: 'rect',
            itemWidth: 20,
            itemHeight: 10,
            orient: 'vertical',
            itemGap: 13,
            data: ['应收', '已收', '物权'],
            top:'5%',
            right: 20,
            // backgroundColor: '',
            textStyle: {
                fontSize: 14,
                color: '#919398'
            }
        },
        grid: {
            show:false,
            left: '8%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            // show:false,
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show:false,
                lineStyle: {
                    color: '#57617B'
                }
            },
            // 坐标轴刻度相关设置
            axisTick:{
                show:false,
            },
            axisLabel:{
                color:'#919398',
                fontSize:14,
                fontFamily: 'Source Han Sans SC'
            },
            data: ['04-30', '05-01', '05-02', '05-03', '05-04', '05-05', '05-06', '05-07']
        }],
        yAxis: [{
            // show:false,
            type: 'value',
            // name: '一周业务数',
            offset: 30,
            axisTick: {
                show: false
            },
            axisLine: {
                show:false,
            },
            axisLabel: {
                // margin: 10,
                color:'#919398',
                fontSize:14,
                fontFamily: 'Source Han Sans SC',
                formatter:'{value}元'
            },
            // minorTick:{
            //     show:false
            // },

            splitLine: {
                show:false
                // lineStyle: {
                //     color: '#57617B'
                // }
            }
        }],
        series: [{
            name: '应收',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            showSymbol: false,
            
            lineStyle: {
                color:COLOR_BLUE_RGB_PRE + ' 0.8)',
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: COLOR_BLUE_RGB_PRE + ' 0.3)' // 0% 处的颜色
                    }, {
                        offset: 1, color: COLOR_BLUE_RGB_PRE + ' 0' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            },
           itemStyle: {
                    color: COLOR_BLUE_RGB_PRE + ' 0.9)'
                },
            data: [220, 182, 191, 134, 150, 120, 110, 125 ]
        },{
            name: '已收',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            showSymbol: false,
            
            lineStyle: {
                color:COLOR_PURPLE_RGB_PRE + ' 0.8)',
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: COLOR_PURPLE_RGB_PRE + ' 0.3)' // 0% 处的颜色
                    }, {
                        offset: 1, color: COLOR_PURPLE_RGB_PRE + ' 0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            },
           itemStyle: {
                    color: COLOR_PURPLE_RGB_PRE + ' 1)'
                },
            data: [420, 152, 125, 194, 153, 140, 365, 130 ]
        }]
    };
    return option;
}

export const echart3js = function (){
    let option = {
        backgroundColor: "#FFFFFF",
        title: {
            text: '本日已收/未收',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 20,
                color: '#919398',
                fontFamily: 'Source Han Sans SC'
            },
            left: '25%',
            top:'10%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        // legend: {
        //     show:true,
        //     icon: 'rect',
        //     itemWidth: 20,
        //     itemHeight: 10,
        //     orient: 'vertical',
        //     itemGap: 13,
        //     data: ['已收', '未收'],
        //     top:'5%',
        //     right: 20,
        //     // backgroundColor: '',
        //     textStyle: {
        //         fontSize: 14,
        //         color: '#919398'
        //     }
        // },
        // calculable: true,
        series: [
        {
            name: '面积模式',
            type: 'pie',
            radius: [100, 150],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label:{
                position: 'outside',
                align:'center',
                formatter: '{b}{c}\n({d}%)'
            },
            // labelLine:{
            //     show:false
            // },
            data: [{
                    value: 34,
                    name: '已收',
                    itemStyle: {
                        color: COLOR_BLUE
                    },
                    label: {
                        color: "#fff",
                        backgroundColor: COLOR_BLUE,
                        borderRadius:5,
                        padding:[5,10],
                        fontFamily: 'SourceHanSansSC-Regular',
                        fontSize: 12,
                    }
                },
                {
                    value: 66,
                    name: '未收',
                    itemStyle: {
                        color: "transparent"
                    }
                }
            ]
        },
        {
            name: '面积模式',
            type: 'pie',
            radius: [110, 140],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label:{
                position: 'outside',
                align:'center',
                formatter: '{b}{c}\n({d}%)'
            },
            data: [{
                    value: 34,
                    name: '已收',
                    itemStyle: {
                        color: "transparent"
                    }
                },
                {
                    value: 66,
                    name: '未收',
                    itemStyle: {
                        color: COLOR_PURPLE
                    },
                    label: {
                        color: "#fff",
                        backgroundColor: COLOR_PURPLE,
                        borderRadius:5,
                        padding:[5,10],
                        align:'center',
                        verticalAlign:'middle',
                        fontFamily: 'SourceHanSansSC-Regular',
                        fontSize: 12,
                    }
                }
            ]
        }]
    };
    return option
}
export const echart4js = function (){
    let option = {
        backgroundColor: "#FFFFFF",
        title: {
            text: '本日已付/未付',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 20,
                color: '#919398',
                fontFamily: 'Source Han Sans SC'
            },
            left: '25%',
            top:'10%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        // legend: {
        //     show:true,
        //     icon: 'rect',
        //     itemWidth: 20,
        //     itemHeight: 10,
        //     orient: 'vertical',
        //     itemGap: 13,
        //     data: ['已付', '未付'],
        //     top:'5%',
        //     right: 20,
        //     // backgroundColor: '',
        //     textStyle: {
        //         fontSize: 14,
        //         color: '#919398'
        //     }
        // },
        // calculable: true,
        series: [
        {
            name: '面积模式',
            type: 'pie',
            radius: [100, 150],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label:{
                position: 'outside',
                align:'center',
                formatter: '{b}{c}\n({d}%)'
            },
            // labelLine:{
            //     show:false
            // },
            data: [{
                    value: 34,
                    name: '已付',
                    itemStyle: {
                        color: COLOR_BLUE
                    },
                    label: {
                        color: "#fff",
                        backgroundColor: COLOR_BLUE,
                        borderRadius:5,
                        padding:[5,10],
                        fontFamily: 'SourceHanSansSC-Regular',
                        fontSize: 12,
                    }
                },
                {
                    value: 66,
                    name: '未付',
                    itemStyle: {
                        color: "transparent"
                    }
                }
            ]
        },
        {
            name: '面积模式',
            type: 'pie',
            radius: [110, 140],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label:{
                position: 'outside',
                align:'center',
                formatter: '{b}{c}\n({d}%)'
            },
            data: [{
                    value: 34,
                    name: '已付',
                    itemStyle: {
                        color: "transparent"
                    }
                },
                {
                    value: 66,
                    name: '未付',
                    itemStyle: {
                        color: COLOR_PURPLE
                    },
                    label: {
                        color: "#fff",
                        backgroundColor: COLOR_PURPLE,
                        borderRadius:5,
                        padding:[5,10],
                        align:'center',
                        verticalAlign:'middle',
                        fontFamily: 'SourceHanSansSC-Regular',
                        fontSize: 12,
                    }
                }
            ]
        }]
    };
    return option
}
